<template>
  <nav>
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <router-link :to="'/'+item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      list: [
        {name: '测试', path: 'test'},
        {name: '栅格', path: 'grid'},
        {name: '按钮', path: 'button'},
        {name: 'Icon', path: 'icon'},
      ]
    }
  },
}
</script>

<style lang="less" scoped>
nav {
  margin-bottom: 40px;

  ul {
    display: flex;
    flex-wrap: wrap;
  }

  li {
    display: inline-block;
  }

  li + li {
    border-left: solid 1px #bbb;
    padding-left: 10px;
    margin-left: 10px;
  }
}

#app {
  padding: 10px 40px;
  margin: 10px 40px;
  background: #f1f0f0;
  box-sizing: border-box !important;
  display: flex;
  flex-direction: column;
}
</style>
